﻿@{
    ViewBag.Title = "Images";
}

<head>
    <title>Coding4Fun Dynamic Lockscreen</title>

    <link rel="stylesheet" href="~/TableThemes/Blue/style.css" type="text/css" />
    <link rel="stylesheet" href="~/Scripts/UITheme/jquery-ui-1.9.2.custom.css" type="text/css" />

    <script type="text/javascript" src="~/Scripts/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui-1.9.2.custom.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.tablesorter.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jshelper.js"></script>

    <script type="text/javascript" id="js">
        $(document).ready(function () {
            $("imageTable").tablesorter();
            setButtonStyles();
        });

        function mainViewClick() {
            var url = '@Url.Action("MainView", "Home")';
                    window.location = url;
        };

        function editImage(id) {
            var url = '@Url.Action("EditImage", "Home", new { imageId = "_id_" })'.replace("_id_", id);
            window.location = url;
        };

        function addImage(id) {
            var url = '@Url.Action("AddImage", "Home", new { categoryId = "_id_" })'.replace("_id_", id);
            window.location = url;
        };

        function deleteImage(iid, cid) {
            var url = '@Url.Action("DeleteImage", "Home", new { imageId = "_iid_", categoryId = "_cid_" })'.replace("_iid_", iid).replace("_cid_", cid);
            window.location = url;
        };
    </script>
</head>

<a href="@Url.Action("MainView", "Home")">
    <img src="~/Images/logo.png" style="border: 0; margin-bottom: 20px;" />
</a>
<br />

<button onclick="addImage('@ViewData["CID"]')" style="width: 130px; height: 30px; font-size: 80%" class="btnAdd">Add Image</button>
<button onclick="mainViewClick()" style="width: 130px; height: 30px; font-size: 80%" class="btnBack">To Categories</button>

<table id="imageTable" class="tablesorter" style="width: 640px;" border="0" cellspacing="0">
    <thead>
        <tr>
            <th class="{sorter: false}">Name</th>
            <th>Preview</th>
            <th>URL</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var p in Model)
        {
            <tr>
                <td style="width: 180px;">
                    @p.Name
                </td>
                <td style="width: 100px;">
                    <img src=" @p.URL " width="100%" />
                </td>
                <td>
                    @p.URL
                </td>
                <td>
                    <button onclick="editImage('@p.id')" class="btnEdit">Edit</button>
                </td>
                <td>
                    <button onclick="deleteImage('@p.id', '@p.CategoryID')" class="btnDelete">Delete</button>
                </td>
            </tr>
        }
    </tbody>
</table>
